
<template>
  <div class="right_bottom">
    <Echart id="RightCenter" :options="options" class="right_center_inner" ref="charts" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: {},
    };
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      const datalist = [
        { value: 1048, name: '非打开门', itemStyle: { color: '#FF4500' }, color: '#fff' }, // 橘红色
        { value: 735, name: '设备不在位', itemStyle: { color: '#FFA07A' } }, // 淡橘色
        { value: 580, name: '震动报警', itemStyle: { color: '#FFFF00' } }, // 黄色
        { value: 484, name: '烟雾报警', itemStyle: { color: '#ADD8E6' } }, // 淡蓝色
        { value: 300, name: '断网断电', itemStyle: { color: '#ADD8E6' } }, // 淡蓝色
        { value: 300, name: '温湿度异常', itemStyle: { color: '#008000' } }  // 绿色
      ]
      this.options = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          color: '#fff',
          orient: 'vertical',
          top: 'center',
          left: '36%',
          itemWidth: 10, // 将图例项的宽度增大一些
          itemHeight: 10, 
          itemGap: 80, // 将图例项之间的间隔增大一些
            textStyle: {
                    color:'#ffffff',
              fontSize: 14,
                    lineHeight: 0
                },
          formatter: function (name) {
            const value = datalist.filter(item => {
              if (item.name === name) {
                return item
              }
            })
            // 将名称和数值分别放在两行中
            return name + '' + value[0].value + '\n';
          },
          data: [
            { name: '非打开门', icon: 'circle' },
            { name: '设备不在位', icon: 'circle' },
            { name: '震动报警', icon: 'circle' },
            { name: '烟雾报警', icon: 'circle' },
            { name: '断网断电', icon: 'circle' },
            { name: '温湿度异常', icon: 'circle' }
          ]
        },
        series: [
          {
            type: 'pie',
            center: ['20%', '50%'], // 设置饼图位于容器的左边（30%的位置）
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderColor: '#070712', // 设置边框颜色为白色（或与背景色相同的颜色）
              borderWidth: 2       // 设置边框宽度
            },
            label: {
              color: '#fff', // 设置标签文字颜色为白色
              show: false,
              normal: {
                position: 'center'
              },
              normal: {
                position: 'center',
                formatter: function (params) {
                  // 自定义中心文字的内容
                  return [
                    '{bold|20\n}',
                    '{normal|\n总数}'
                  ].join('');
                },
                rich: {
                  bold: {
                    fontWeight: 'bold',
                    color: '#fff',
                    fontSize: 24
                  },
                  normal: {
                    color: '#ccc',
                    fontSize: 14
                  }
                }
              },
              // position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                color: '#fff', // 设置标签文字颜色为白色
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: datalist
          }
        ]
      };
    },
  }
}
</script>
<style scoped lang="scss">
.right_bottom {
  width: 100%; // 确保宽度为100%
  height: 260px; // 设置一个具体的高度或根据需要调整
}

.right_center_inner {
  width: 100%;
  height: 100%;
}
</style>
